<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <div style="">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>




<style scoped>
/* 公共布局样式 */  
.common-layout {  
  width: 100%;  
  height: 100vh; /* 视口高度 */  
  display: flex;  
}  
  
/* Element Plus 容器样式，用于包裹aside和另一个container */  
.el-container {  
  display: flex;  
  height: 100%;  
}  
  
/* 侧边栏样式 */  
.el-aside {  
  background-color: green; /* 淡蓝色背景 */  
  color: #333; /* 文本颜色 */  
  text-align: center;  
  width: 200px; /* 设置宽度 */  
}  
  
/* 右侧容器样式，包含header、main和footer */  
.el-container > .el-container {  
  flex-grow: 1; /* 占据剩余空间 */  
  display: flex;  
  flex-direction: column; /* 垂直布局 */  
}  
  
/* 头部样式 */  
.el-header {  
  background-color: #b3c0d1; /* 浅灰色背景 */  
  color: #333; /* 文本颜色 */  
  text-align: center;  
  line-height: 60px; /* 头部高度和文本垂直居中 */  
}  
  
/* 主内容区样式 */  
.el-main {  
  color: #333; /* 文本颜色 */  
  padding: 20px; /* 内边距 */  
  flex-grow: 1; /* 占据剩余空间 */  
}  
  
/* 底部样式 */  
.el-footer {  
  background-color: #b3c0d1; /* 与头部相同的浅灰色背景 */  
  color: #333; /* 文本颜色 */  
  text-align: center;  
  line-height: 60px; /* 底部高度和文本垂直居中 */  
}
</style>
<script setup>
import Menu from './components/Menu.vue'
</script>